<template>
	<div class="card">
		<div class="card__title">
			<slot name="title">
				<span class="title">{{ title }}</span>
			</slot>
			<slot name="more">
				<span class="more" v-if="moreText" @click="$emit('more-click')">{{
					moreText
				}}</span>
			</slot>
		</div>

		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		title: String,
		moreText: String
	},
	data() {
		return {}
	},
	computed: {},
	mounted() {},
	methods: {},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.card {
	&__title {
		padding: 0 $space_3;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		span.title {
			font-size: $font_medium_x;
			font-weight: 600;
			line-height: 2.9;
		}

		span.more {
			font-size: $font_medium_x;
			line-height: 2.9;
			color: $color_main;
		}
	}
}
</style>
